<template>
    <div class="e-select" @click="show = !show">
        <div v-text="label" class="input"></div>
        <div class="arrow" :class="{x: !show}"></div>
        <div class="select-data" v-show="show">
            <div :class="{now: label === item.label}" v-for="(item,i) in options" :key="i" @click="changeItem(item,i)">
                {{item.label}}
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    name: 'e-select',
    model: {
      prop: 'label',
      event: 'change'
    },
    props: {
      label: {
        type: String,
        default: '现金'
      },
      options: {
        type: Array,
        default: function () {
          return [{
            value: '选项1',
            label: '现金'
          }, {
            value: '选项2',
            label: '信用卡'
          }, {
            value: '选项3',
            label: '新增'
          }]
        }
      }
    },
    data: function () {
      return {
        show: false
      }
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted: function () {}, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {
      changeItem(item,i) {
        this.$emit('change', item.label,i)
        typeof this.change === 'function' ? this.change(item,i) : null
      }
    } // 函数
  }
</script>
<style lang='scss'>
    .e-select {
        box-sizing: border-box;
        height: 40px;
        border: 1px solid #409eff;
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 1em;
        position: relative;
        background-color: white;
        > .input {
            border: unset;
            outline: unset;
            padding: unset;
            color: #606266;
            font-size: 14px;
        }
        .shadow-box {
            padding: 4px 0;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
            border: 1px solid #ebeef5;
            background-color: white;
        }
        .arrow {
            position: relative;
            transition: all 0.4s;
            &::before, &::after {
                content: "";
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border: 6px solid transparent;
                left: calc(50% - 6px);
                top: -6px;
            }
            &::before {
                filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
                border-top-width: 0;
                border-bottom-color: #ebeef5;
            }
            &::after {
                top: -4px;
                border-top-width: 0;
                border-bottom-color: #fff;
            }
            &.x {
                transform: rotate(180deg);
            }
        }
        .select-data {
            @extend .shadow-box;
            @extend .arrow;
            &::before, &::after {
                left: 2em;
            }
            margin: 12px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: absolute;
            z-index: 2;
            top: 100%;
            left: 0;
            margin-left: 0;
            > div {
                height: 30px;
                line-height: 30px;
                width: 100%;
                box-sizing: border-box;
                text-align: left;
                padding-left: 1em;
                color: #606266;
                font-size: 14px;
                &.now {
                    background-color: #f5f7fa;
                    color: #409eff;
                    font-weight: 700;
                }
                &:hover {
                    background-color: #f5f7fa;
                    color: #409eff;
                    font-weight: 700;
                }
            }
        }
    }
</style>
